<script setup lang="ts">
import { useRouter } from 'vue-router';
import { goodsListGet } from '@/services/home.ts';
import type { GoodsList } from '@/types/index.ts';

const $router = useRouter();
const loading = ref(false);
const finished = ref(false);
const goodsList = ref<GoodsList[]>([]);
const listData = reactive({
  page: 1,
  limit: 10,
  count: '',
  goodsType: '',
});

const onImageClick = (item: GoodsList) => {
  $router.push({
    path: `/goodsDetails/${item.goodsId}`,
  });
};
const carPop = ref(false);
const joinCarData = ref({});
const onJoinCarClick = (props: GoodsList) => {
  carPop.value = true;
  joinCarData.value = props;
};

const loadData = async () => {
  try {
    loading.value = true;
    const { data, err } = await goodsListGet({
      goodsType: listData.goodsType,
      page: listData.page,
      limit: listData.limit,
    });
    if (err) {
      showToast(err);
      return;
    }
    listData.count = data.count;
    goodsList.value = [...goodsList.value, ...data.goodsList];

    if (data.goodsList.length < listData.limit) {
      finished.value = true;
    } else {
      listData.page++;
    }
  } catch (error: any) {
    showToast(error);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  loadData();
});
</script>

<template>
  <van-list
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    error-text="请求失败，点击重新加载"
    @load="loadData"
  >
    <div class="goods_container">
      <div v-for="item in goodsList" :key="item.goodsId" class="listBox">
        <van-image @click="onImageClick(item)" :src="item.goodsImg?.split(',')[0]" />
        <div class="goods_name">
          <van-text-ellipsis rows="2" :content="item.goodsName" />
        </div>
        <div class="goods_price">
          <div>
            <span class="price-icon">￥</span>
            <span>{{ item.goodsSalesPrice }}</span>
          </div>
          <svg-icon @click="onJoinCarClick(item)" icon-class="car" size="1.3em" />
        </div>
      </div>
    </div>
  </van-list>
  <JoinCar v-model="carPop" :joinCarData="joinCarData"></JoinCar>
</template>

<style scoped lang="scss">
.listBox {
  width: 181px;
  height: 255px;
  background: white;
  margin-top: 4px;
  border-radius: 8px;

  .van-image {
    width: 100%;
    height: 181px;
  }

  .goods_name {
    width: 100%;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 500;
    color: #000;
  }

  .goods_price {
    width: 100%;
    height: 22px;
    padding: 0 8px;
    font-size: 16px;
    font-weight: 500;
    margin-top: 4px;
    color: #e86600;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .price-icon {
      font-size: 10px;
      font-weight: 400;
    }
  }
}

.goods_container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;

  &:after {
    content: '';
    width: 181px; //这个宽度和子元素宽度一致
    height: 0;
    display: block;
  }
}
</style>
